Passed
Push — master ( eee053...2b5061 )
by Joe Nilson
04:47
created

CommonModals.js ➔ setModalHtml   A

Complexity

Conditions 1

Size

Total Lines 17
Code Lines 15

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 1
eloc 15
c 0
b 0
f 0
dl 0
loc 17
rs 9.65
1
/*
2
 * Copyright (C) 2021 Joe Nilson <[email protected]>
3
 *
4
 * This program is free software: you can redistribute it and/or modify
5
 * it under the terms of the GNU Lesser General Public License as
6
 * published by the Free Software Foundation, either version 3 of the
7
 * License, or (at your option) any later version.
8
 *
9
 * This program is distributed in the hope that it will be useful,
10
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
12
 * GNU Lesser General Public License for more details.
13
 * You should have received a copy of the GNU Lesser General Public License
14
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
15
 */
16
17
/**
18
 * Modal Creation Functions
19
 * Code based on the gist https://gist.github.com/signalpoint/e6dda6b6220a157edbd170f3d2a6250e
20
 */
21
22
/**
23
 * @param {string} modalId
24
 * @param {string} title
25
 * @param {string} content
26
 * @param {string} contentType
27
 */
28
function executeModal(modalId, title, content, contentType = 'default', saveButtonCallback = '')
29
{
30
    //Set the modal ID
31
    let actualModal = getModal(modalId);
32
33
    // Init the modal if it hasn't been already.
34
    actualModal = (!actualModal) ? initModal(modalId) : actualModal;
35
36
    //Set the modal content based on the type
37
    content = setModalContentType(contentType, content);
38
39
    //Choose the buttons to show based on the contentType
40
    let buttons = setModalButtons(contentType, saveButtonCallback);
41
42
    //Assemble all the pieces in the final modal html body
43
    let html = setModalHtml(modalId, title, content, buttons);
44
45
    //Put the modal content in the modal
46
    setModalContent(modalId, html);
47
48
    //Show the modal
49
    $(actualModal).modal('show');
50
}
51
52
/**
53
 * @returns {HTMLElement}
54
 * @param {string} modalId
55
 */
56
function getModal(modalId)
57
{
58
    return document.getElementById(modalId);
59
}
60
61
/**
62
 * @param {string} contentType
63
 * @param {string} content
64
 * @returns {string}
65
 */
66
function setModalContentType(contentType, content)
67
{
68
    if (contentType == 'default') {
69
        return content;
70
    } else {
0 ignored issues
show
Comprehensibility introduced by
else is not necessary here since all if branches return, consider removing it to reduce nesting and make code more readable.
Loading history...
71
        return '<div className="alert alert-' + contentType + '" role="alert"> ' + content + '</div>';
72
    }
73
}
74
75
/**
76
 * @param {string} modalId
77
 * @param {string} html
78
 */
79
function setModalContent(modalId, html)
80
{
81
    getModal(modalId).querySelector('.modal-content').innerHTML = html;
82
}
83
84
/**
85
 * @param {string} modalId
86
 * @param {string} title
87
 * @param {string} content
88
 * @param {string} buttons
89
 * @returns {string}
90
 */
91
function setModalHtml(modalId, title, content, buttons)
92
{
93
    var html =
94
        '<div class="modal-header">' +
95
        '<h5 class="modal-title" id="'+modalId+'-ModalLabel">'+title+'</h5>' +
96
        '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
97
        '<span aria-hidden="true">&times;</span>' +
98
        '</button>' +
99
        '</div>' +
100
        '<div class="modal-body">' +
101
        content +
102
        '</div>' +
103
        '<div class="modal-footer">' +
104
        buttons +
105
        '</div>';
106
    return html;
107
}
108
109
/**
110
 * @param {string} contentType
111
 * @param {string} saveButtonCallback
112
 * @returns {string}  {string}
113
 */
114
function setModalButtons(contentType, saveButtonCallback)
115
{
116
    const onClick = (saveButtonCallback) ? ' onClick=' + saveButtonCallback + '(this)' : '';
117
    const cancelButton  = '<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>';
118
    const warningButton  = '<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>';
119
    const saveButton = '<button type="button" class="btn btn-primary"'+onClick+'>Guardar</button>';
120
121
    let buttons = (contentType == 'warning') ? warningButton : cancelButton + saveButton;
122
123
    return buttons;
124
}
125
126
/**
127
128
 * @param {string} modalId
129
 * @returns {HTMLDivElement}
130
 */
131
function initModal(modalId)
132
{
133
    let modal = document.createElement('div');
134
    modal.classList.add('modal', 'fade');
135
    modal.setAttribute('id', modalId);
136
    modal.setAttribute('tabindex', '-1');
137
    modal.setAttribute('role', 'dialog');
138
    modal.setAttribute('aria-labelledby', modalId+'-ModalLabel');
139
    modal.setAttribute('aria-hidden', 'true');
140
    modal.innerHTML =
141
        '<div class="modal-dialog" role="document">' +
142
        '<div class="modal-content"></div>' +
143
        '</div>';
144
    document.body.appendChild(modal);
145
    return modal;
146
}